<template>
  <div>
    <el-upload
      action="#"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-change="changeFile"
      :before-upload="beforeUpload"
      :http-request="upload"
      :file-list="fileList"
      :class="{disabled:fileComputed}"

    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" title="图片预览">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>

</template>

<script>
  import COS from 'cos-js-sdk-v5'
  const cos = new COS({
    SecretId: 'AKID0mqfEWqlUzIbeSkGRL6c7ML6c0B93To9', // 身份识别 ID
    SecretKey: 'JFwNZdeRF2iOp03FFsGNDm44vWFitmNF' // 身份密钥
  })

  export default {
    name: "index",
    props: {
      limit: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        fileList: [{url: 'https://img2.baidu.com/it/u=1945464906,1635022113&fm=26&fmt=auto'}],
        showPercent: false, // 控制进度条的显示和隐藏
        percent: 0 // 当前的进度
      };
    },
    methods: {
      //删除照片
      handleRemove(file, fileList) {
        this.fileList = this.fileList.filter(item => item.uid !== file.uid)
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      // 该函数会被多次调用 fileList其实就是当前最新的文件列表
      changeFile(file, fileList) {
        // this.fileList = [...fileList]
        this.fileList = fileList.map(item => item)
      },
      // 上传之前检查
      beforeUpload(file) {
        // 文件类型 文件大小
        const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
        if (!types.includes(file.type)) {
          this.$message.error('上传图片只能是 JPG、GIF、BMP、PNG 格式!')
          return false
        }
        //   文件大小
        const maxSize = 25 * 1024 * 1024
        if (maxSize < file.size) {
          this.$message.error('图片最大的大小为5M')
          return false
        }
        return true
      },
      // 上传到腾讯云
      upload(params) {
        if (params.file) {
          this.showPercent = true // 显示进度条
          //   上传对象到腾讯云
          cos.putObject({
            Bucket: 'shuiruohanyu-1302806742', /* 每个人的存储桶名称 */
            Region: 'ap-nanjing', /* 存储桶所在地域，必须字段 */
            Key: params.file.name, /* 文件名称 */
            StorageClass: 'STANDARD', // 固定值
            Body: params.file, // 上传文件对象
            onProgress: (progressData) => {
              this.percent = progressData.percent * 100
            }
          }, (err, data) => {
            console.log(data)
            if (data.statusCode === 200 && data.Location) {
              // 上传成功
              this.fileList = this.fileList.map(item => {
                // 将本地的地址替换成线上已经放在腾讯云之后的地址
                if (item.uid === params.file.uid) {
                  return { url: 'http://' + data.Location, upload: true }
                }
                return item
              })
              this.showPercent = false // 关闭进度条
              this.percent = 0 // 将进度归0
            }
          })
        }
      }

    },
    computed: {
      fileComputed() {
        return this.fileList.length === this.limit
      }
    }
  }
</script>

<style>

  .disabled .el-upload--picture-card {
    display: none
  }

</style>
